<template>
	<view class="page">
		<view class="swiper-wrap">
			<u-swiper height="750rpx" :list="swiperList"></u-swiper>
		</view>
		<view class="main">
			<view class="goods-name">
				<view class="name">
					{{detail.productName}}
				</view>
				<view class="price">
					<view class="text">
						<view class="red">
							{{detail.mll}}%
						</view>
						<view class="t1">
							毛利
						</view>
					</view>
					<view class="text">
						<view class="red">
							建议售价：¥{{detail.price}}
						</view>
					</view>
					<view class="text">
						<view class="t">
							产地{{detail.chandi}}
						</view>
					</view>
				</view>
			</view>
			<view class="company">
				<view class="name">
					{{company.name}}
				</view>
				<view class="desc">
					<view class="view">
						{{company.lookNum}}人浏览
					</view>
					<view class="in-btn" @click="toCompany(company.id)">
						进入企业
					</view>
				</view>
				<u-divider lineColor="#ECECEC" style="margin: 24rpx 0 20rpx 0;"></u-divider>
				<video v-if="detail.productVedio" :src="fileServer+detail.productVedio" class="video" controls></video>
			</view>
			<view class="detail">
				<view class="title">
					<image class="banner" src="../../../static/img/tit.png" mode="widthFix"></image>
					产品详情
				</view>
				<!-- 富文本 -->
				<view class="detail-content">
					<u-parse :content="detail.content"></u-parse>
					<!-- <image src="../../../static/img/detail.png" mode="widthFix"></image> -->
				</view>
			</view>
			<view class="detail">
				<view class="title">
					
					<image class="banner" src="../../../static/img/tit.png" mode="widthFix"></image>
					更多商品
				</view>

				<view class="goods-wrap">
					<view class="goods" v-for="(item,index) in moreProductList" :key="index">
						<image class="goods-img" :src="fileServer+item.productImg"></image>
						<view class="name">
							{{item.productName}}
						</view>
						<view class="price">
							<view class="text">
								<view class="red">
									{{item.mll}}%
								</view>
								<view class="t">
									毛利
								</view>
							</view>
							<view class="text">
								<view class="t">
									零售
								</view>
								<view class="red">
									{{item.price}}
								</view>
							</view>
							<view class="text">
								<view class="t">
									产地{{item.chandi}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="detail">
				<view class="title">
					<image class="banner" src="../../../static/img/tit.png" mode="widthFix"></image>
					联系我们
				</view>

				<view class="user-list">
					<view class="user" v-for="(item,index) in LxrList" :key="index">
						<view class="name">
							{{item.name}}
						</view>
						<view class="line">
							|
						</view>
						<view class="ads">
							{{item.fzqy}}
						</view>
						<view class="talk-btn" @click="toCard(item)">
							联系TA
						</view>
					</view>
				</view>
				<view v-if="this.LxrList.length<this.total" class="look-more" @click="morePage">
					查看更多
					<image class="down" src="../../../static/img/icon-down.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="tips">
				联系是说在xxx看到的，会有优惠哦！
			</view>
		</view>
		<view class="btm-tc">

		</view>
		<view class="btm-wrap">
			<view class="sm-btn" @click="toCompany(company.id)">
				<image class="icon" src="../../../static/img/gongsi-white.png" mode="widthFix"></image>
				<view class="label">
					企业
				</view>
			</view>
			<view class="sm-btn" @click="saveCollectBtn">
				<image v-if="detail.sfsc==1" class="icon" src="../../../static/img/shoucang_ok.png" mode="widthFix"></image>
				<image v-else class="icon" src="../../../static/img/shoucang.png" mode="widthFix"></image>
				<view class="label">
					{{detail.sfsc==1?'已收藏':'收藏'}}
				</view>
			</view>
			<view class="btn sq" @click="applyBtn">
				申请样品
			</view>
			<view class="btn sx" @click="shangXinSetBtn">
				上新提醒
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileServer: this.$fileServer,
				detail: {},
				company: {},
				moreProductList:[],
				swiperList: [],
				LxrList:[],
				pageIndex:1,
				total:0,
			};
		},
		onLoad(options) {
			if (options.type && options.type === 'look') {
				const eventChannel = this.getOpenerEventChannel();
				// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
				eventChannel.on('acceptDataFromOpenerPage', (data) => {
					this.detail = data.detail
					this.getCompany()
				})
			} else if(options.id) {
				this.productId = options.id
				this.getProductDetail()
			}
		},
		methods: {
			// 产品详情
			getProductDetail() {
				this.$api.company.getProductDetailById({
					productId: this.productId
				}).then(res => {
					if(res.flag){
						let info = res.data;
						this.detail = info.product;
						this.company = info.company;
						this.moreProductList = info.moreProductList;
						let productImg = info.product.productImg
						if(productImg){//productImg
							let list = productImg.split(',');
							list.forEach(ele=>{
								console.log('url:',this.$fileServer)
								ele = this.$fileServer + ele
							})
							console.log(list)
							this.swiperList = list;
						}
						
						this.getCompanyLxrList()
					}
				})
			},
			// 公司详情
			getCompany() {
				this.$api.company.getCompanyDetailById({
					companyId: this.detail.companyId
				}).then(res => {
					this.company = res.data.company
				})
			},
			// 获取联系人列表
			getCompanyLxrList(){
				let pageIndex = this.pageIndex;
				this.$api.company.getCompanyLxrList({
					pageIndex,companyId:this.detail.companyId
				}).then(res => {
					if(res.code==200){
						let list = res.rows;
						if(pageIndex==1){
							this.LxrList = list;
						}else{
							this.LxrList = this.LxrList.concat(list) ;
						}
						
						this.total = res.total;
					}
				})
			},
			morePage(){
				if(this.LxrList.length<this.total){
					++this.pageIndex;
					this.getCompanyLxrList();
				}
			},
			// 去企业页面
			toCompany(id) {
				uni.navigateTo({
					url: "/pages/company/companyIndex/companyIndex?id="+id
				})
			},
			toCard() {
				uni.navigateTo({
					url: "/pages/card/cardIndex/cardIndex"
				})
			},
			// 收藏
			saveCollectBtn(){
				this.$api.member.saveCollect({
					productId:this.productId,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if(res.flag){
						if(this.detail.sfsc==1){
							this.detail.sfsc = 0
						}else{
							this.detail.sfsc = 1
						}
					}
				})
			},
			// 申请样品---暂无页面
			applyBtn(){
				let detail = this.detail;//产品信息
				uni.navigateTo({
					url:'/pages/shop/sample/sample',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('samplePage', detail)
					}
				})
			},
			// 上新提醒
			shangXinSetBtn(){
				this.$api.company.shangXinSet({
					companyId:this.detail.companyId
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;

		.btm-tc {
			height: 102rpx;
			width: 100%;
		}

		.btm-wrap {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 102rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 3;
			padding: 0 24rpx 0 32rpx;

			background: #FFFFFF;

			.sm-btn {text-align: center;
				.icon {
					width: 36rpx;
					height: auto;
					margin-bottom: 8rpx;display: inline-block;
				}

				.label {
					text-align: center;
					font-size: 18rpx;
				}
			}

			.btn {
				width: 224rpx;
				height: 70rpx;
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				font-weight: bold;

				&.sq {
					background: #FFFFFF;
					border: 1px solid #EC2424;
					color: #EC2424;
				}

				&.sx {
					background: #EC2424;
					color: #FFFFFF;
				}
			}

		}

		.main {
			position: relative;
			top: -40rpx;
			z-index: 2;
			padding: 0 20rpx;

			.tips {
				margin: 24rpx 0;
				text-align: center;
				color: #AAAAAA;
				font-size: 28rpx;
			}

			.goods-name {
				border-radius: 20rpx;
				background: #FFFFFF;
				width: 100%;
				padding: 20rpx;

				.name {
					font-size: 36rpx;
					line-height: 50rpx;
					font-weight: bold;
				}

				.price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 18rpx;

					.text {
						display: flex;
						align-items: center;

						.red {
							font-weight: bold;
							color: #E83149;
							font-size: 28rpx;
						}

						.t {
							font-size: 22rpx;
						}

						.t1 {
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
			}

			.company {
				border-radius: 20rpx;
				background: #FFFFFF;
				width: 100%;
				padding: 20rpx;
				margin-top: 24rpx;

				.name {

					font-size: 36rpx;
					line-height: 50rpx;
					font-weight: bold;
				}

				.desc {
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.view {

						color: #777777;
						font-size: 28rpx;
					}

					.in-btn {
						width: 148rpx;
						height: 50rpx;
						background: #EC2424;
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
				}

				.video {
					width: 100%;
					height: 324rpx;
				}
			}

			.detail {

				border-radius: 20rpx;
				background: #FFFFFF;
				width: 100%;
				margin-top: 24rpx;
				overflow: hidden;

				.title {
					height: 92rpx;
					width: 100%;
					position: relative;
					text-align: center;
					padding-top: 30rpx;
					font-size: 30rpx;
					line-height: 42rpx;

					.banner {
						position: absolute;
						left: 50%;
						top: 58%;
						transform: translate(-50%, -50%);
						width: 258rpx;
						height: auto;
					}
				}

				.detail-content {padding: 0 30rpx 30rpx;

					img,
					image {
						width: 100%;
					}
				}

				.goods-wrap {
					width: 100%;
					overflow: hidden;
					padding: 0 16rpx;

					background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);

					.goods {
						margin-bottom: 24rpx;
						width: 334rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						overflow: hidden;
						padding-bottom: 20rpx;
						margin-right: 10rpx;
						float: left;

						&:nth-child(2n+0) {
							margin-right: 0;
						}

						.goods-img {
							width: 100%;
							height: 334rpx;
						}

						.name {
							margin-top: 16rpx;
							font-size: 28rpx;
							line-height: 40rpx;
							padding: 0 12rpx;
						}

						.price {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 12rpx;
							margin-top: 10rpx;

							.text {
								display: flex;
								align-items: center;

								.red {

									color: #E83149;
									font-size: 28rpx;
								}

								.t {

									font-size: 22rpx;
								}
							}
						}

					}
				}

				.user-list {
					padding: 80rpx 20rpx 24rpx;

					.user {
						margin-bottom: 24rpx;
						display: flex;
						align-items: center;
						// justify-content: space-between;

						.name {
							font-size: 32rpx;
							width: 100rpx;
							overflow:hidden;text-overflow:ellipsis;white-space: nowrap;
						}

						.line {
							margin: 0 10rpx 0 6rpx;
							color: #979797;
						}

						.ads {
							font-size: 28rpx;
							color: #777777;
							width: 450rpx;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;
						}

						.talk-btn {
							width: 124rpx;
							height: 50rpx;
							background: #EC2424;
							border-radius: 25rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.look-more {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #777777;
					margin-bottom: 26rpx;

					.down {
						width: 30rpx;
						height: auto;
						margin-left: 4rpx;
					}
				}

			}
		}
	}
</style>